<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>所有文章</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8"/>
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/x-admin/font.css">
    <link rel="stylesheet" href="/static/css/x-admin/xadmin.css">
    <link rel="stylesheet" href="/static/css/admin-index.css">
</head>
<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a>控制台</a>
        <a>文章管理</a>
        <a><cite>所有文章</cite></a>
      </span>
    <a class="layui-btn layui-btn-sm layui-btn-radius" style="line-height:1.6em;margin-top:4px;float:right"
       href="javascript:location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-anim layui-anim-scale x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" action="/admin/newArticle/all">
            <label for="articleStatus">状态：</label>
            <div class="layui-inline">
                <select class="layui-input-inline" id="articleStatus" name="articleStatus" lay-verify="">
                    <option value="">所有</option>
                    <#list articleStatusValues as status>
                        <#if articleValue??>
                            <#if (articleValue.getArticleStatus()?? && articleValue.getArticleStatus() == status.getValue())>
                             <option value="${status.getValue()}" selected>${status.getMessage()}</option>
                            <#else>
                                <option value="${status.getValue()}">${status.getMessage()}</option>
                            </#if>
                        <#else>
                            <option value="${status.getValue()}">${status.getMessage()}</option>
                        </#if>
                    </#list>
                </select>
            </div>
            <div class="layui-inline">
                <label for="cate">分类：</label>
                <div class="layui-inline">
                    <select class="layui-input-inline" id="cate" name="category.cateId" lay-verify=""
                            lay-filter="cate-select"></select>
                </div>
            </div>
            <div class="layui-inline">
                <label for="title">标题：</label>
                <div class="layui-inline">
                    <input id="title" type="text" name="articleTitle" placeholder="输入标题关键字" autocomplete="off"
                           class="layui-input"
                           value="<#if articleValue??><#if articleValue.getArticleTitle()??>${articleValue.getArticleTitle()}</#if></#if>">
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
            </div>
        </form>
    </div>
    <table class="layui-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>分类</th>
            <th>标题</th>
            <th>日期</th>
            <th>评论数量</th>
            <th>浏览量</th>
            <th>状态</th>
            <th>操作</th>
        </thead>
        <tbody>
            <#list articles as article>
            <tr>
                <td>${article.getArticleId()}</td>
                <td>${article.getCategory().getCateName()}</td>
                <td><a href="/${article.getArticleUrl()}" target="_blank"><i
                        class="layui-icon layui-icon-link"></i>${article.getArticleTitle()}</a></td>
                <td>${article.getCreateTime()?string('yyyy-MM-dd HH:mm:ss')}</td>
                <td>${(article.getComments()?size)}</td>
                <td>${(article.getArticleViews())}</td>
                <td class="td-status">
                    <#if article.getArticleStatus()==0>
                        <span class="layui-btn layui-btn-danger layui-btn-xs">审核</span>
                    <#elseIf article.getArticleStatus()==1>
                        <span class="layui-btn layui-btn-xs">公开</span>
                    <#elseIf article.getArticleStatus()==2>
                        <span class="layui-btn layui-btn-warm layui-btn-xs">草稿</span>
                    </#if>
                </td>
                <td class="td-manage">
                    <button class="layui-btn layui-btn-xs" type="button"
                            onclick="x_admin_show('修改文章','/admin/newArticle/new?articleId=${article.getArticleId()}')">
                        编辑文章
                    </button>
                    <button class="layui-btn layui-btn-danger layui-btn-xs" type="button"
                            onclick="member_del(this, ${article.getArticleId()})" href="#">
                        删除文章
                    </button>
                </td>
            </tr>
            </#list>
        </tbody>
    </table>
</div>
<script type="text/javascript" src="/static/js/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/x-admin/xadmin.js"></script>
<script>
    // 重新加载表单
    function renderFrom() {
        layui.use('form', function () {
            var form = layui.form;
            form.render();
        });
    }

    // 初始化分类目录
    function loadCategory() {
        var options = "<option value=\"\">所有</option>";
        $.ajax({
            url: "/admin/cate/cateAll",
            type: "post",
            dataType: "json",
            success: function (data) {
                buildOptions(data['data'].categoryList);
                var category = $("#cate");
                category.html(options);
                renderFrom();
            }, error: function () {
                layer.msg("初始化分类目录失败");
            }
        });

        function buildOptions(list) {
            if (list === null || list.length < 0) {
                return;
            }
            for (var i = 0; i < list.length; i++) {
                var cate = list[i];
                var space = "";
                for (var j = 1; j < cate.index; j++) {
                    space += "&nbsp;&nbsp;";
                }
                <#if articleValue?? && articleValue.getCategory()?? && articleValue.getCategory().getCateId()??>
                    var cateId = ${articleValue.getCategory().getCateId()};
                    if (cateId === cate.cateId) {
                        options += "<option value=\"" + cate.cateId + "\" selected>" + space + "V" + cate.index + "." + cate.cateName + "</option>\n";
                    } else {
                        options += "<option value=\"" + cate.cateId + "\">" + space + "V" + cate.index + "." + cate.cateName + "</option>\n";
                    }
                <#else>
                    options += "<option value=\"" + cate.cateId + "\">" + space + "V" + cate.index + "." + cate.cateName + "</option>\n";
                </#if>
                if (cate.children.length > 0) {
                    buildOptions(cate.children);
                }
            }
        }
    }

    loadCategory();
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
    });

    /*删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                url: "/admin/newArticle/removeArticle",
                data: {
                    articleId: id
                },
                type: "post",
                success: function (data) {
                    if (data.code === 2003) {
                        $(obj).parents("tr").remove();
                        layer.msg(data.message, {icon: 1, time: 1000});
                    } else {
                        layer.msg(data.message, {icon: 5, time: 1000});
                    }
                },
                error: function () {
                    layer.msg('删除失败!', {icon: 5, time: 1000});
                }
            });
        });
    }
</script>
</body>
</html>